<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="up-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item :label="$t('device.Owner')">
            <el-input
              v-model="queryParams.ownerName"
              :placeholder="$t('device.enterOwner')"
              maxlength="50"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('device.brand')">
            <el-input
              v-model="queryParams.brandName"
              :placeholder="$t('device.enterBrand')"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('device.model')">
            <el-select
              class="selectAirSpace"
              v-model="queryParams.modelType"
              :placeholder="$t('device.enterModel')"
              clearable
            >
              <el-option
                v-for="dict in modelTypeList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('device.serialNumber')">
            <el-input
              v-model="queryParams.serialNumber"
              :placeholder="$t('device.enterSerialNumber')"
              maxlength="30"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('device.deviceType')">
            <el-select
              class="selectAirSpace"
              v-model="queryParams.deviceType"
              :placeholder="$t('device.enterDeviceType')"
              clearable
            >
              <el-option
                v-for="dict in deviceTypeList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <div class="buttonStyle">
            <el-button
              class="searchButton"
              type="primary"
              icon="Search"
              @click="handleQuery"
              >{{ $t("device.search") }}</el-button
            >
            <el-button
              class="refreshButton"
              icon="Refresh"
              @click="resetQuery"
              >{{ $t("device.reset") }}</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="down-container">
        <el-table
          :data="tableData"
          :header-cell-style="headClass"
          stripe
          :border="true"
          max-height="60vh"
          style="width: 100%"
        >
          <el-table-column
            :label="$t('device.no')"
            type="index"
            :index="indexMethod"
            width="85"
            align="center"
          />
          <el-table-column
            :label="$t('device.operate')"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleDetail(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:detail']"
                >{{ $t("device.detail") }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column :label="$t('device.Owner')" align="center">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleOwner(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:detail']"
                >{{ scope.row.ownerName }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('device.deviceType')"
            prop="deviceType"
            align="center"
          />
          <el-table-column
            :label="$t('device.IDCard')"
            prop="electronicIdCard"
            align="center"
          >
            <template #default="{ row }">
              {{ row.electronicIdCard || "-" }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('device.serialNumber')"
            prop="serialNumber"
            align="center"
          >
            <template #default="{ row }">
              {{ row.serialNumber || "-" }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('device.model')"
            prop="modelType"
            align="center"
          >
            <template #default="{ row }">
              {{ row.modelType || "无" }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('device.brand')"
            prop="brandName"
            align="center"
          >
            <template #default="{ row }">
              {{ row.brandName || "无" }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryCurrent.pageNum"
          v-model:limit="queryCurrent.pageSize"
          @pagination="getListFun"
          class="pagination"
        />
      </div>

      <!--  详情  -->
      <el-dialog
        class="deviceVisible"
        v-model="dialogVisibleDetail"
        title=""
        width="26%"
        :show-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        top="16vh"
      >
        <template #header>
          <div class="title">{{ baseTitle + "详情" }}</div>
        </template>
        <div v-if="deviceType === '品牌无人机'">
          <el-form :model="deviceData" ref="addAlarmRef">
            <el-form-item :label="$t('device.deviceTypes')">
              <el-input v-model="deviceData.deviceType" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.equipmentBrand')">
              <el-input v-model="deviceData.brandName" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.equipmentModel')">
              <el-input v-model="deviceData.modelType" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.IDCard') + ':'">
              <el-input v-model="deviceData.electronicIdCard" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.aircraftNumber')">
              <el-input v-model="deviceData.serialNumber" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.flightNumber')">
              <el-input v-model="deviceData.flightControlSn" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.equipmentPhoto')">
              <img
                v-if="deviceData.devicePicture"
                :src="deviceData.devicePicture"
                class="photoImg"
                alt=""
              />
              <div v-else>无</div>
            </el-form-item>
            <el-form-item :label="$t('device.aircraftPhoto')">
              <img
                v-if="deviceData.serialNumberPicture"
                :src="deviceData.serialNumberPicture"
                class="photoImg"
                alt=""
              />
              <div v-else>无</div>
            </el-form-item>
            <el-form-item :label="$t('device.flightPhoto')">
              <img
                v-if="deviceData.flightControlSnPicture"
                :src="deviceData.flightControlSnPicture"
                class="photoImg"
                alt=""
              />
              <div v-else>无</div>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="deviceType === '自制无人机'">
          <el-form :model="deviceData" ref="addAlarmRef">
            <el-form-item :label="$t('device.deviceTypes')">
              <el-input v-model="deviceData.deviceType" disabled />
            </el-form-item>
            <el-form-item label="设备名称:">
              <el-input v-model="deviceData.deviceName" disabled />
            </el-form-item>
            <el-form-item label="电子身份证:">
              <el-input v-model="deviceData.electronicIdCard" disabled />
            </el-form-item>
            <el-form-item label="机翼类型:">
              <el-input v-model="deviceData.wingType" disabled />
            </el-form-item>
            <el-form-item label="旋翼类型:">
              <el-input v-model="deviceData.rotorType" disabled />
            </el-form-item>
            <el-form-item label="通讯频段:">
              <el-input v-model="deviceData.communicateType" disabled />
            </el-form-item>
            <el-form-item label="机身重量（kg）:">
              <el-input v-model="deviceData.bodyWeight" disabled />
            </el-form-item>
            <el-form-item label="起飞重量（kg）:">
              <el-input v-model="deviceData.takeoffWeight" disabled />
            </el-form-item>
            <el-form-item label="是否超视距:">
              <el-input v-model="deviceData.wingTypeId" disabled />
            </el-form-item>
            <el-form-item label="是否保值无人机:">
              <el-input v-model="deviceData.plantFlag" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.equipmentPhoto')">
              <img
                v-if="deviceData.devicePicture"
                :src="deviceData.devicePicture"
                class="photoImg"
                alt=""
              />
              <div v-else>无</div>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="deviceType === '航模'">
          <el-form :model="deviceData" ref="addAlarmRef">
            <el-form-item :label="$t('device.deviceTypes')">
              <el-input v-model="deviceData.deviceType" disabled />
            </el-form-item>
            <el-form-item label="设备名称:">
              <el-input v-model="deviceData.deviceName" disabled />
            </el-form-item>
            <el-form-item label="电子身份证:">
              <el-input v-model="deviceData.electronicIdCard" disabled />
            </el-form-item>
            <el-form-item label="通讯频段:">
              <el-input v-model="deviceData.communicateType" disabled />
            </el-form-item>
            <el-form-item label="机身重量(Kg):">
              <el-input v-model="deviceData.bodyWeight" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.equipmentPhoto')">
              <img
                v-if="deviceData.devicePicture"
                :src="deviceData.devicePicture"
                class="photoImg"
                alt=""
              />
              <div v-else>无</div>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="deviceType === '飞机'">
          <el-form :model="deviceData" ref="addAlarmRef">
            <el-form-item :label="$t('device.deviceTypes')">
              <el-input v-model="deviceData.deviceType" disabled />
            </el-form-item>
            <el-form-item label="设备品牌:">
              <el-input v-model="deviceData.deviceName" disabled />
            </el-form-item>
            <el-form-item label="设备机型:">
              <el-input v-model="deviceData.aircraftModel" disabled />
            </el-form-item>
            <el-form-item label="机尾号:">
              <el-input v-model="deviceData.flightControlSn" disabled />
            </el-form-item>
            <el-form-item label="飞机编号:">
              <el-input v-model="deviceData.serialNumber" disabled />
            </el-form-item>
            <el-form-item label="电子标识:">
              <el-input
                v-model="deviceData.electronicIdentificatIion"
                disabled
              />
            </el-form-item>
            <el-form-item :label="$t('device.equipmentPhoto')">
              <img
                v-if="deviceData.devicePicture"
                :src="deviceData.devicePicture"
                class="photoImg"
                alt=""
              />
              <div v-else>无</div>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="deviceType === '飞艇'">
          <el-form :model="deviceData" ref="addAlarmRef">
            <el-form-item :label="$t('device.deviceTypes')">
              <el-input v-model="deviceData.deviceType" disabled />
            </el-form-item>
            <el-form-item label="设备名称:">
              <el-input v-model="deviceData.deviceName" disabled />
            </el-form-item>
            <el-form-item label="电子身份证:">
              <el-input v-model="deviceData.electronicIdCard" disabled />
            </el-form-item>
            <el-form-item label="飞艇类型:">
              <el-input v-model="deviceData.airshipType" disabled />
            </el-form-item>
            <el-form-item label="浮升气体:">
              <el-input v-model="deviceData.gasDriveType" disabled />
            </el-form-item>
            <el-form-item label="存放地:">
              <el-input v-model="deviceData.storagePlace" disabled />
            </el-form-item>
            <el-form-item label="用途:">
              <el-input v-model="deviceData.used" disabled />
            </el-form-item>
            <el-form-item :label="$t('device.equipmentPhoto')">
              <img
                v-if="deviceData.devicePicture"
                :src="deviceData.devicePicture"
                class="photoImg"
                alt=""
              />
              <div v-else>无</div>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisibleDetail = false">{{
              $t("device.back")
            }}</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup name="device">
import { onMounted, reactive, ref, toRefs } from "vue";
import {
  getDeviceList,
  getDetailByDeviceSn,
} from "@/api/dataManagement/device";
import { getDicts } from "@/api/system/dict/data";
import { ElFormItem, ElInput } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const total = ref(0);
const tableData = ref([]);
const modelTypeList = ref([]);
const deviceTypeList = ref([]);
const deviceType = ref("");
const baseTitle = ref("");
const data = reactive({
  queryParams: {
    ownerName: "",
    brandName: "",
    modelType: "",
    serialNumber: "",
    deviceType: "",
  },
  queryCurrent: {
    pageNum: 1,
    pageSize: 10,
  },
  deviceData: {},
});
const { queryParams, deviceData, queryCurrent } = toRefs(data);
const dialogVisibleDetail = ref(false);

function indexMethod(index) {
  // 当前页码
  const currentPage = queryCurrent.value.pageNum;
  // 每页显示的数据条数
  const pageSize = queryCurrent.value.pageSize;
  // 上一页最后一个编号
  const prevLastIndex = (currentPage - 1) * pageSize;
  // 当前行的实际索引
  const truelndex = index + prevLastIndex;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex >= currentPage * pageSize
    ? truelndex
    : index + prevLastIndex + 1;
}

async function getModelTypeList() {
  await getDicts("drone_model_type").then((res) => {
    // 型号
    if (res.code === 200) {
      modelTypeList.value = res.data;
    }
  });
  await getDicts("device_type").then((res) => {
    // 设备
    if (res.code === 200) {
      deviceTypeList.value = res.data;
    }
  });
}

// 拥有者
function handleOwner(val) {
  console.log("XXXXXXXXXXXX", val);
  if (val.ownerType === 0) {
    // 个人
    router.push({
      name: "DataUserDetail",
      query: { personId: val.ownerId },
    });
  } else {
    // 机构
    router.push({
      name: "InstitutionalDetail",
      query: { institutionId: val.deviceId, toExamine: "detail", owner: true },
    });
  }
}

// 详情
function handleDetail(val) {
  deviceType.value = val.deviceType;
  baseTitle.value = val.deviceType;
  dialogVisibleDetail.value = true;
  console.log("val.serialNumber", val.flightControlSn);
  getDetailByDeviceSn(val.flightControlSn).then((res) => {
    if (res.code === 200) {
      deviceData.value = res.data;
    }
  });
}

function headClass({ row, rowIndex }) {
  if (rowIndex === 0) {
    return {
      background: "#F4F4F4",
      color: "#333333",
      fontSize: "16px",
      fontWeight: "400",
    };
  }
}

function handleQuery() {
  getList();
}

function resetQuery() {
  queryParams.value = {
    ownerName: "",
    brandName: "",
    modelType: "",
    serialNumber: "",
    deviceType: "",
  };
  getList();
}

function getListFun() {
  getList();
}

function getList() {
  getDeviceList(queryCurrent.value, queryParams.value).then((res) => {
    if (res.code === 200) {
      tableData.value = res.rows;
      total.value = res.total;
    }
  });
}

onMounted(() => {
  getList();
  getModelTypeList();
});
</script>
<style lang="scss" scoped>
.airspaceApplication {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }

    .up-container {
      padding: 30px 20px 30px;
      width: 100%;
      height: 140px;
      border-radius: 10px;
      background-color: #ffffff;

      :deep .el-form .el-form-item__label {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        width: 70px;
      }

      .buttonStyle {
        position: absolute;
        right: 0px;
        top: -45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 200px;
        height: 40px;
      }

      .searchButton {
        width: 90px;
        height: 34px;
        border-radius: 4px;
        color: #ffffff;
        background-color: #2bc17b;
        font-size: 14px;
        margin: 0;
      }

      .refreshButton {
        width: 90px;
        height: 34px;
        border-radius: 4px;
        color: #ffffff;
        font-size: 14px;
        background: #ffb700;
        margin: 0;
      }

      :deep .el-form--inline .el-form-item {
        display: inline-flex;
        vertical-align: middle;
        margin-right: 40px;
        margin-bottom: 19px;
      }

      :deep .el-form-item__content {
        width: auto;
        height: 36px;
        border-radius: 4px;
        background: rgb(255, 255, 255);
        border: 1px solid rgb(220, 223, 230);
      }

      :deep .el-input__wrapper {
        box-shadow: none;
        height: 34px;
        width: 100% !important;
      }

      :deep .el-input {
        width: 270px;
        height: 34px;
      }

      :deep .el-select {
        width: 270px;
        height: 34px;
        //display: flex;
        //align-items: center;
        :deep .el-input {
          height: 34px;
        }
      }
    }

    .down-container {
      margin: 10px 0 0;
      background-color: #ffffff;
      border-radius: 4px;
      height: 77%;
    }

    .deviceVisible {
      width: 559px;
      height: 484px;
      position: relative;
      top: 20%;

      .photoImg {
        width: 100px;
        height: 100px;
      }

      .title {
        height: 100%;
        background-color: #2bc17b;
        color: #ffffff;
        text-align: left;
        padding: 15px 28px;
        font-size: 18px;
        letter-spacing: 1px;
      }

      :deep .el-dialog__header {
        padding: 0;
        margin: 0 0 10px 0;
      }
    }
    :deep .el-dialog__headerbtn {
      position: absolute;
      top: 3px;
      right: 0;
      padding: 0;
      width: 54px;
      height: 54px;
      background: 0 0;
      border: none;
      outline: 0;
      cursor: pointer;
      font-size: 31px;
      color: #ffffff;
    }

    :deep .el-table__footer-wrapper,
    .el-table__header-wrapper {
      background-color: #f4f4f4;
      height: 56px;
    }

    :deep .el-table__header {
      height: 100%;
      background-color: #f4f4f4;
    }

    :deep .el-table .el-table__cell {
      text-align: center;
    }

    :deep .el-table__row {
      height: 50px;
    }

    :deep .el-dialog:not(.is-fullscreen) {
      margin-top: 16vh !important;
    }
    :deep .el-dialog__header {
      padding: 0;
      margin: 0 0 10px 0;
    }

    :deep .el-form-item--default .el-form-item__label {
      width: 21%;
      color: #666666;
      font-weight: 400;
      font-size: 14px;
      text-align: right;
      line-height: 1.3;
      margin: 5px 0 -2px 0;
    }
  }
  :deep .el-dialog__headerbtn .el-dialog__close{
    color: #ffffff;
  }
}
</style>
